<template>
    <div>
<!--        车辆信息-->
<!--        <input type="text" id="input_id">-->
<!--        <div id="main" ref="myCharts" style="width: 1000px;height: 1000px;"></div>-->
        <div id="container"></div>
        <div>
            <img src="../../assets/image/truck.png" alt="">
        </div>
    </div>
</template>

<script>
    import AMapLoader from '@amap/amap-jsapi-loader';
    import truckImg from '../../assets/image/truckSmall.png'
    export default {
        data() {
            return {
                mapInit(){
                    AMapLoader.load({
                        "key": "607839a0bcc061d8f61c5fe3ab4b8664",   // 申请好的Web端开发者Key，首次调用 load 时必填
                        // "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                        "plugins": ['AMap.ToolBar', 'AMap.Scale', 'AMap.Autocomplete', 'AMap.PlaceSearch']  //插件列表
                    }).then((AMap)=>{
                        let map = new AMap.Map('container', {
                            center: [122.227597,40.650903],
                            zoom: 13
                        });



                        // amap 点击确定经纬度坐标
                        var clickHandler = function(e) {
                            alert('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');
                        };
                        map.on('click', clickHandler);
                        let marker = new AMap.Marker({
                            custom: {
                                startPos: '营口理工学院',
                                endPos: '森林公园 '
                            },
                            // content: '标记1',
                            icon: truckImg,
                            // content: '张三',
                            position: new AMap.LngLat(122.227597,40.650903),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                            title: '车辆1',
                        });
                        let marker2 = new AMap.Marker({
                            custom: {
                                startPos: '太和庄村',
                                endPos: '万达广场'
                            },
                            // content: '标记1',
                            icon: truckImg,
                            // content: '张三',
                            position: new AMap.LngLat(122.257981,40.664446),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                            title: '车辆2',
                        });
                        let marker3 = new AMap.Marker({
                            // content: '标记1',
                            custom: {
                                startPos: '西市区',
                                endPos: '西炮台公园'
                            },
                            icon: truckImg,
                            // content: '张三',
                            position: new AMap.LngLat(122.182107,40.665618),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                            title: '车辆3',
                            xx: '123'
                        });
                        let markList = [marker, marker2, marker3]
                        for (let i in markList) {
                            markList[i].on('click', function () {
                                let _this = this
                                console.log(this)
                                new AMap.InfoWindow({
                                    // isCustom: true,  //使用自定义窗体
                                    // anchor: 'top-left',
                                    content: `
                                        <div style="width: 150px;">
                                        <p>起始位置:${_this.w.custom.startPos}</p>
                                        <p>目标位置:${_this.w.custom.endPos}</p>
                                        </div>
                                    `
                                }).open(map, this.w.position);
                                console.log()
                            })
                        }
                        console.log(map.getCenter());
                        // 将创建的点标记添加到已有的地图实例：
                        map.add(markList);
                        // 左上角伸缩条和  左下角标尺
                        var toolbar = new AMap.ToolBar();
                        var scale = new AMap.Scale();
                        map.addControl(toolbar);
                        map.addControl(scale);


                        // 搜索插件暂时无效
                        // var autoOptions = {
                        //     // input 为绑定输入提示功能的input的DOM ID
                        //     input: 'input_id'
                        // }
                        // var placeSearch = new AMap.PlaceSearch({
                        //     map: map
                        // });
                        // var autoComplete= new AMap.AutoComplete(autoOptions);
                        // autoComplete.on("select", select);//注册监听，当选中某条记录时会触发
                        // function select(e) {
                        //     placeSearch.setCity(e.poi.adcode);
                        //     placeSearch.search(e.poi.name);  //关键字查询查询
                        // }

                    }).catch(e => {
                        console.log(e);
                    })
                }
            }
        },
        mounted() {
            this.mapInit()
        }
    }
</script>
<style>
    #container {width:100%; height: 600px; }
</style>

<!--<script>-->
<!--    amap 点击确定经纬度坐标-->
<!--    var clickHandler = function(e) {-->
<!--        alert('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');-->
<!--    };-->
<!--    map.on('click', clickHandler);-->
<!--</script>-->